<template>
    <div class="container">
        <div class="map">
            <div class="map-main-map" id="map"></div>
        </div>
        <div class="buttons">
            <el-button type="primary" @click="affirm">确定</el-button>
            <el-button @click="exit">取消</el-button>
        </div>
    </div>
    
</template>

<script setup>
    import { onMounted } from 'vue';
    import { addMarker, changePosition, loadMap } from '../../utils/map';

    const emit = defineEmits(['exit'])

    let map = null;

    let marker = null;

    const position = {
        lng: null,
        lat: null
    }

    const initMap = async () => {
        map = await loadMap("map")
        map.on('click', mapClick)
    }

    const mapClick = (e) =>{
        if(marker)
            marker.setMap(null)
        marker = addMarker(map, e.lnglat.lng, e.lnglat.lat, '选点位置', `经度:${e.lnglat.lng} 纬度${e.lnglat.lat}`)
        position.lng = e.lnglat.lng;
        position.lat = e.lnglat.lat;
    }

    onMounted(()=> {
        initMap()
    })

    const affirm = () => {
        emit('exit', position)
    }

    const exit = () => {
        emit('exit', null)
    }

</script>

<style scoped>
    .container {
        width: 1200px;
    }

    .map {
        margin-bottom: 32px;
    }

    #map {
        width: 700px;
        height: 500px;
    }
</style>